<style lang="less">
  .insurance-statistics {
    .statics{
      margin-top: 40px;
      .bg-purple {
        background: #f2f2f2;
        .el-row {
          margin-bottom: 5px;
        }
        .bg-purple-header {
          font-size: 16px;
        }
      }
      .grid-content {
        border: 1px solid #d1dbe5;
        border-radius: 4px;
        min-height: 155px;
        padding: 10px 10px 0px 10px;
      }
      label {
        width: 150px;
        text-align: left;
        vertical-align: middle;
        float: left;
        line-height: 19px;
        height: 19px;
        box-sizing: border-box;
      }
    }
  }
</style>

<template>
  <div class="insurance-statistics">
    <search-bar moreDisplay>
      <el-row>
        <el-col :span="8">
          <el-form-item label="投保订单编号" >
            <el-input   v-model="condition['LIKE_order.orderNumber']" placeholder="请输入投保订单编号"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="16">
          <el-form-item label="投保日期">
            <el-col :span="10">
              <el-radio-group v-model="radio" >
                <el-radio-button label="lastweek">上周</el-radio-button>
                <el-radio-button label="week">本周</el-radio-button>
                <el-radio-button label="month">本月</el-radio-button>
                <el-radio-button label="quarter">本季度</el-radio-button>
              </el-radio-group>
            </el-col>
            <el-col :span="14">
              <el-date-picker
                v-model="daterange"
                type="daterange"
                placeholder="选择日期范围">
              </el-date-picker>
            </el-col>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="被投保人名称" >
            <el-input   v-model="condition['LIKE_order.memberUserName']" placeholder="请输入被投保人名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item>
            <el-checkbox v-model="checked">有使用优惠卷</el-checkbox>
          </el-form-item>
        </el-col>
      </el-row>
    </search-bar>
    <el-col :span="24" style="padding-bottom: 10px;border-bottom: 1px solid #d1dbe5;">
      <el-button type="primary">导出投保统计</el-button>
      <el-button type="primary" style="float: right" @click="reset">重置</el-button>
      <el-button type="primary" style="float: right;margin-right: 10px" @click="search">查询</el-button>
    </el-col>

    <div>
      <el-col :span="12" style="padding-top: 10px;">
        <el-breadcrumb>
          <el-breadcrumb-item>投保统计</el-breadcrumb-item>
        </el-breadcrumb>
        <el-row :gutter="10" style="margin-bottom: 10px;" class="statics">
          <el-col :span="8">
            <div class="grid-content bg-purple">
              <el-row>
                <label>总订单数：</label>{{statistics.orderNum}}票
              </el-row>
              <el-row>
                <label>投保订单数：</label>{{statistics.orderInsuranceStatistics.insuranceNum}}票
              </el-row>
              <el-row>
                <label>投保订单占比：</label>{{(statistics.orderInsuranceStatistics.insuranceNum * 100 /statistics.orderNum).toFixed(2)}}%
              </el-row>
              <el-row>
                <label>保价服务取消率：</label>{{(100-statistics.orderInsuranceStatistics.insuranceNum * 100 /statistics.orderNum).toFixed(2)}}%
              </el-row>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content bg-purple">
              <el-row>
                <label>保价金额：</label>{{(statistics.orderInsuranceStatistics.goodsValue/10000).toFixed(2)}}万元
              </el-row>
              <el-row>
                <label>投保订单保费：</label>{{statistics.orderInsuranceStatistics.insuranceFee}}元
              </el-row>
              <el-row>
                <label>平均投保费率：</label>{{(100 * statistics.orderInsuranceStatistics.insuranceFee/statistics.orderInsuranceStatistics.goodsValue || 0).toFixed(2)}}%
              </el-row>
              <el-row>
                <label>投保订单保险成本：</label>{{statistics.orderInsuranceStatistics.total}}元
              </el-row>
              <el-row>
                <label>单均毛利润：</label>{{((statistics.orderInsuranceStatistics.insuranceFee - statistics.orderInsuranceStatistics.total) / statistics.orderInsuranceStatistics.insuranceNum || 0).toFixed(2)}}元
              </el-row>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content bg-purple">
              <el-row>
                <label>发放投保优惠劵数：</label>{{statistics.insuranceCouponStatistics.insuranceNum || 0}}张
              </el-row>
              <el-row>
                <label>投保优惠劵成本：</label>{{statistics.insuranceCouponStatistics.insurancePrice || 0}}元
              </el-row>
              <el-row>
                <label>优惠劵使用率：</label>{{(100 * statistics.orderInsuranceStatistics.insuranceCouponNum / statistics.orderInsuranceStatistics.insuranceNum || 0).toFixed(2) || 0}}%
              </el-row>
              <el-row>
                <label>优惠劵发放使用率：</label>{{((100 * (statistics.orderInsuranceStatistics.insuranceCouponNum || 0) / statistics.insuranceCouponStatistics.insuranceNum) || 0).toFixed(2) || 0}}%
              </el-row>
            </div>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="12" style="padding-top: 10px;">
        <el-breadcrumb>
          <el-breadcrumb-item>最近15天投保关键指数趋势图</el-breadcrumb-item>
        </el-breadcrumb>
        <ve-line :data="chartData" :settings="chartSettings" height="250px" :grid="{top: 40,bottom: 10}"></ve-line>
      </el-col>
    </div>
    <el-table
      :data="tableData"
      v-loading="listLoading"
      highlight-current-row border
      style="width: 100%">
      <el-table-column
        type="index"
        width="50">
      </el-table-column>
      <el-table-column
        prop="orderNumber"
        label="投保订单编号"
        width="180">
        <template slot-scope="scope">
          <el-button type="text" style="padding: 0;" @click="openDialog(scope.row.orderId,scope.row.orderNumber)">
            {{scope.row.orderNumber}}
          </el-button>
        </template>
      </el-table-column>
      <el-table-column
        prop="orderCreateDate"
        label="下单日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="createDate"
        width="180"
        label="投保日期">
      </el-table-column>
      <el-table-column
        prop="goodsValue"
        width="180"
        label="保价金额(万元)">
        <template slot-scope="scope">
          {{(scope.row.goodsValue/10000).toFixed(2)}}
        </template>
      </el-table-column>
      <el-table-column
        prop="insuranceFee"
        width="180"
        label="投保订单保费(元)">
      </el-table-column>
      <el-table-column
        prop="total"
        width="180"
        label="保费成本(元)">
      </el-table-column>
      <el-table-column
        prop="shipmentsContactName"
        width="180"
        label="被保人名称">
      </el-table-column>
      <el-table-column
        prop="shipmentsRegion"
        width="180"
        label="起始地">
      </el-table-column>
      <el-table-column
        prop="sendRegion"
        width="180"
        label="目的地">
      </el-table-column>
      <el-table-column
        prop="cargoNames"
        width="180"
        label="货物名称">
      </el-table-column>
      <el-table-column
        prop="packTypeNames"
        width="180"
        label="包装类型">
      </el-table-column>
      <el-table-column
        prop="amount"
        width="180"
        label="件数">
      </el-table-column>
      <el-table-column
        prop="orderStatusName"
        width="180"
        label="订单状态">
      </el-table-column>
      <el-table-column
        prop="couponPrice"
        width="180"
        label="优惠抵扣(元)">
      </el-table-column>
    </el-table>
    <el-col :span="24" class="toolbar">
      <el-pagination
        :current-page="page"
        :page-size="size"
        @size-change="handleSizeChange"
        @current-change="handleCurrentPageChange"
        layout="total,sizes,prev, pager, next, jumper"
        :total="total" style="float: right">
      </el-pagination>
    </el-col>
    <order-track-detail ref="orderTrackDetail"></order-track-detail>
  </div>
</template>

<script>
import {trend, statistics, getAllOrderInsurances} from '../../api/order/OrderInsurance';
import OrderTrackDetail from '../order/OrderTrackDetail.vue';
export default {
  components: {OrderTrackDetail},
  data: function () {
    return {
      condition: {
        'LIKE_order.orderNumber': null,
        'LIKE_order.memberUserName': null
      },
      checked: false,
      radio: 'lastweek',
      daterange: [],
      statistics: {
        'orderNum': 0,
        'orderInsuranceStatistics': {
          insuranceCouponNum: 0,
          'insuranceNum': 0,
          'goodsValue': 0,
          'insuranceFee': 0,
          'total': 0
        },
        'insuranceCouponStatistics': {
          'num': 0,
          'insuranceNum': 0,
          'insurancePrice': 0
        }
      },
      page: 1,
      size: 10,
      total: 0,
      listLoading: false,
      tableData: [],
      chartData: {
        columns: ['日期', '总订单数', '投保订单数', '投保订单占比'],
        rows: []
      },
      chartSettings: {
        axisSite: {right: ['投保订单占比']},
        yAxisType: ['KMB', 'percent'],
        yAxisName: ['票数', '比率']
      }
    };
  },
  watch: {
    radio (val) {
      if (val === 'lastweek') {
        this.lastWeek();
      } else if (val === 'week') {
        this.week();
      } else if (val === 'month') {
        this.month();
      } else {
        this.quarter();
      }
    }
  },
  methods: {
    openDialog (orderId, orderNumber) {
      this.$refs.orderTrackDetail.show(orderId, orderNumber);
    },
    search () {
      let filters = this.$ue.objToFilter(this.condition);
      if (this.checked) {
        filters += ';ISNOTNULL_order.couponId';
      }
      filters += ';GT_order.confirmTime=' + this.daterange[0].toJSON();
      filters += ';LT_order.confirmTime=' + this.$ue.addDays(this.daterange[1], 1).toJSON();
      this.loadAllOrderInsurances(filters);
      this.loadStatistics(this.daterange[0].toJSON(), this.$ue.addDays(this.daterange[1], 1).toJSON());
    },
    reset () {
      this.$ue.resetObjNull(this.condition);
      this.checked = false;
    },
    handleSizeChange (size) {
      this.size = size;
      this.search();
    },
    handleCurrentPageChange (page) {
      this.page = page;
      this.search();
    },
    loadStatistics (beginTime, endTime) {
      statistics({
        beginTime: beginTime,
        endTime: endTime
      }).then(res => {
        if (res.data.successFlg) {
          this.statistics = res.data.obj;
        } else {
          this.$message.error(res.data.errorMsg);
        }
      });
    },
    loadAllOrderInsurances (filters = '') {
      getAllOrderInsurances({
        filters: 'IN_insuranceStatus=101028002;' + filters,
        sorts: '-createDate',
        page: this.page,
        size: this.size
      }).then(res => {
        if (res.data.successFlg) {
          this.tableData = res.data.detailModelList;
          this.total = res.data.totalCount;
        } else {
          this.$message.error(res.data.errorMsg);
        }
      });
    },
    lastWeek () {
      this.daterange = this.$ue.getLastWeek();
    },
    week () {
      this.daterange = this.$ue.getThisWeek();
    },
    month () {
      this.daterange = this.$ue.getThisMonthNew();
    },
    quarter () {
      this.daterange = this.$ue.getThisQuarterNew();
    }
  },
  mounted () {
    this.lastWeek();
    trend().then(res => {
      if (res.data.successFlg) {
        this.chartData.rows = res.data.detailModelList;
      } else {
        this.$message.error(res.data.errorMsg);
      }
    });
    this.loadStatistics(this.daterange[0].toJSON(), this.$ue.addDays(this.daterange[1], 1).toJSON());
    this.search();
  }
};
</script>
